<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <counter :counter="counter" :colorCode="colorCode" />
    <counter-squared :counter="counter" :counterSquared="counterSquared" />
    <buttons :increaseF="increase" :decreaseF="decrease" />
    <color-code />
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import Counter from '@/components/Counter'
import Buttons from '@/components/Buttons'
import ColorCode from '@/components/ColorCode'
import CounterSquared from '@/components/CounterSquared'

export default {
  setup() {
    const store = useStore()

    const counter = computed(() => {
      return store.state.counter
    })

    const colorCode = computed(() => {
      return store.state.colorCode
    })

    const counterSquared = computed(() => {
      return store.getters.counterSquared
    })

    function increase() {
      store.dispatch('increase')
    }

    function decrease() {
      store.dispatch('decrease')
    }

    return { counter, colorCode, counterSquared, increase, decrease }
  },
  components: {
    Counter,
    CounterSquared,
    Buttons,
    ColorCode
  }
}
</script>

<style scoped>
div {
  margin-bottom: 10px;
}
</style>

